<template>
  <div :class="['card', variant, className, { 'card-glass': glass, 'card-hover': hover }]">
    <div v-if="$slots.header" class="card-header">
      <slot name="header" />
    </div>
    <div class="card-body">
      <slot />
    </div>
    <div v-if="$slots.footer" class="card-footer">
      <slot name="footer" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Card',
  props: {
    className: {
      type: String,
      default: ''
    },
    variant: {
      type: String,
      default: '',
      validator: (value) => ['', 'primary', 'secondary', 'accent', 'success', 'warning', 'error'].includes(value)
    },
    glass: {
      type: Boolean,
      default: false
    },
    hover: {
      type: Boolean,
      default: true
    }
  }
}
</script>

<style>
.card {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  background: var(--color-background);
  border: 1px solid var(--color-gray-100);
  overflow: hidden;
  height: 100%;
  transition: all var(--transition-normal) var(--transition-timing);
}

.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-gray-200);
}

.card-glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.card-header {
  padding: var(--spacing-6);
  border-bottom: 1px solid var(--color-gray-100);
}

.card-body {
  padding: var(--spacing-6);
}

.card-footer {
  padding: var(--spacing-6);
  border-top: 1px solid var(--color-gray-100);
}

.card.primary {
  border-top: 4px solid var(--color-primary);
}

.card.secondary {
  border-top: 4px solid var(--color-secondary);
}

.card.accent {
  border-top: 4px solid var(--color-accent);
}

.card.success {
  border-top: 4px solid var(--color-success);
}

.card.warning {
  border-top: 4px solid var(--color-warning);
}

.card.error {
  border-top: 4px solid var(--color-error);
}

@media (prefers-color-scheme: dark) {
  .card-glass {
    background: rgba(31, 41, 55, 0.7);
    border: 1px solid rgba(55, 65, 81, 0.5);
  }

  .card-header {
    border-bottom: 1px solid var(--color-gray-800);
  }

  .card-footer {
    border-top: 1px solid var(--color-gray-800);
  }
}
</style> 